<template>
  <view class="user-container">
    <!-- 背景图 -->
    <view class="background-container">
      <image class="background-image" src="/static/backgrounds/app-bg.svg"></image>
      <view class="background-overlay"></view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-info-card">
      <view class="avatar-container">
        <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.svg'" mode="aspectFill"></image>
        <view class="avatar-border"></view>
      </view>
      <view class="user-details">
        <text class="username">{{ userInfo.username || '未登录' }}</text>
        <text class="user-email">{{ userInfo.email || '请登录' }}</text>
        <text class="user-bio" v-if="userInfo.bio">{{ userInfo.bio }}</text>
        
        <!-- 用户标签 -->
        <view class="user-tags" v-if="userInfo.tags && userInfo.tags.length > 0">
          <view class="tag" v-for="tag in userInfo.tags" :key="tag">{{ tag }}</view>
        </view>
      </view>
    </view>
    
    <!-- 统计数据 -->
    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-number">{{ stats.favorites || 0 }}</text>
        <text class="stat-label">收藏</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ stats.views || 0 }}</text>
        <text class="stat-label">浏览</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ stats.likes || 0 }}</text>
        <text class="stat-label">点赞</text>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="switchTab('/pages/app/app')">
        <view class="menu-icon-container">
          <image class="menu-icon" src="/static/tabs/app.svg"></image>
        </view>
        <text>应用中心</text>
        <text class="arrow-text">></text>
      </view>
      <view class="menu-item" @click="navigateTo('/pages/video/video')">
        <view class="menu-icon-container">
          <image class="menu-icon" src="/static/icons/video.svg"></image>
        </view>
        <text>视频播放</text>
        <text class="arrow-text">></text>
      </view>
      <view class="menu-item" @click="handleEditProfile">
        <view class="menu-icon-container">
          <image class="menu-icon" src="/static/icons/user.svg"></image>
        </view>
        <text>编辑资料</text>
        <text class="arrow-text">></text>
      </view>
      <view class="menu-item" @click="handleSettings">
        <view class="menu-icon-container">
          <image class="menu-icon" src="/static/icons/lock.svg"></image>
        </view>
        <text>账户设置</text>
        <text class="arrow-text">></text>
      </view>
    </view>
    
    <!-- 注销按钮 -->
    <button class="logout-btn" @click="handleLogout">注销登录</button>
  </view>
</template>

<script>
import { getUserInfo, logout } from '@/utils/auth.js'

export default {
  data() {
    return {
      userInfo: {},
      stats: {
        favorites: 0,
        views: 0,
        likes: 0
      }
    }
  },
  mounted() {
    this.loadUserInfo()
    this.loadUserStats()
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },
	switchTab(url) {
	  uni.switchTab({
	    url: url
	  })
	},
    loadUserInfo() {
      const info = getUserInfo()
      console.log("info", info)
      if (info) {
        this.userInfo = info
        // 模拟标签数据
        if (!this.userInfo.tags) {
          this.userInfo.tags = ['视频爱好者', '活跃用户']
        }
      }
    },
    loadUserStats() {
      // 模拟加载用户统计数据
      // 实际项目中应该从API获取
      if (Object.keys(this.userInfo).length > 0) {
        this.stats = {
          favorites: 28,
          views: 124,
          likes: 56
        }
      }
    },
    handleEditProfile() {
      uni.navigateTo({
        url: '/pages/edit-profile/edit-profile'
      })
    },
    handleSettings() {
      uni.showToast({
        title: '账户设置功能待实现',
        icon: 'none'
      })
    },
    handleLogout() {
      uni.showModal({
        title: '确认注销',
        content: '确定要注销当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            logout()
          }
        }
      })
    }
  }
}
</script>

<style>
.user-container {
  position: relative;
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  overflow: hidden;
}

/* 背景图样式 */
.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400rpx;
  z-index: 0;
}

.background-image {
  width: 100%;
  height: 100%;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(20, 120, 120, 0.7) 100%);
}

/* 用户信息卡片样式 */
.user-info-card {
  display: flex;
  align-items: flex-start;
  padding: 40rpx;
  margin-top: 240rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.user-info-card:active {
  transform: scale(0.98);
}

.avatar-container {
  position: relative;
  margin-right: 40rpx;
}

.avatar {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  border: 6rpx solid #fff;
}

.avatar-border {
  position: absolute;
  top: -12rpx;
  left: -12rpx;
  width: 204rpx;
  height: 204rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4CAF50 0%, #00BCD4 100%);
  opacity: 0.3;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 44rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
  color: #333;
}

.user-email {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 10rpx;
}

.user-bio {
  font-size: 28rpx;
  color: #666;
  display: block;
  line-height: 1.5;
  margin-bottom: 15rpx;
}

/* 用户标签样式 */
.user-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.tag {
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  background-color: #e8f5e9;
  color: #4CAF50;
  border-radius: 40rpx;
  margin-right: 12rpx;
  margin-bottom: 12rpx;
}

/* 统计数据样式 */
.stats-container {
  display: flex;
  justify-content: space-around;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-number {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.stat-label {
  display: block;
  font-size: 26rpx;
  color: #999;
}

/* 功能列表样式 */
.menu-list {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 36rpx 40rpx;
  border-bottom: 2rpx solid #f8f8f8;
  transition: background-color 0.3s ease;
}

.menu-item:active {
  background-color: #f8f8f8;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon-container {
  width: 70rpx;
  height: 70rpx;
  border-radius: 16rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}

.menu-icon {
  width: 44rpx;
  height: 44rpx;
}

.menu-item text {
  font-size: 32rpx;
  color: #333;
}

.arrow-text {
  font-size: 32rpx;
  color: #999;
  margin-left: auto;
}

/* 注销按钮样式 */
.logout-btn {
  width: calc(100% - 40rpx);
  margin: 20rpx;
  padding: 32rpx;
  background-color: #fff;
  color: #ff5252;
  border: 2rpx solid #ff5252;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: normal;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.logout-btn:active {
  background-color: #ff5252;
  color: #fff;
}
</style>